<!doctype html>
<%@ page import="com.mastercard.labs.Target"%>
<html class="no-js" lang="en">
<head>
<meta name="layout" content="common">
<title>Profile Setting</title>

</head>
<body id="body">
	<h2>Profile Setting</h2>
	<hr />
	<g:if test="${flash.message}">
		<div class="alert alert-success">
			<img src="${resource(dir:'images', file:'icon_successful.png') }" />&nbsp;&nbsp;${flash.message}
		</div>
	</g:if>
	<!-- 
	<g:hasErrors bean="${voucherInstance}">
			<ul class="errors" role="alert">
				<g:eachError bean="${voucherInstance}" var="error">
				<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
				</g:eachError>
			</ul>
	</g:hasErrors>
	 -->
	<div class="row>">
		<g:form method="POST">
		<h3>My Profile</h3>
			<table class="table table-striped">
			  <thead>
        		<tr>
            	  <th>Username: ${userInstance.username}</th>
            	  <th></th>
        		</tr>
    	  	  </thead>
    		  <tbody>
				<tr class='odd'>
					<td>Name: ${userInstance.name}</td>
					<td>NRIC: ${userInstance.nric}</td>
				</tr>
				<tr class='even'>
					<td>Gender: ${userInstance.gender}</td>
					<td>Date Of Birth: <g:formatDate format="yyyy-MM-dd" date="${userInstance.birthDate}"/></td>
				</tr>
				<tr class='odd'>
					<td>Address:</td>
					<td>Postal Code:</td>
				</tr>
				<tr class='even'>
					<td>Mobile: ${userInstance.mobile}</td>
					<td>Email Address: ${userInstance.email}</td>
				</tr>
				<tr class='odd'>
					<td>SMS Notification: ${userInstance.smsNotification}</td>
					<td>Email Notification: ${userInstance.emailNotification}</td>
				</tr>
				<tr>
					<td><g:link action="editProfile" method="POST">[Update Profile]</g:link> <g:link action="changePassword" method="POST">[Change Password]</g:link></td>
					<td></td>
				</tr>
			  </tbody>
			</table>
		</g:form>
	</div>
	<div class="row>">
		<g:form method="POST">
		<h3>My Cards</h3>
			<table class="table table-striped" >
			  <thead>
        		<tr>
            		<th>Bank Name</th>
            		<th>Brand</th>
            		<th>Card Number</th>
            		<th>Holder Name</th>
            		<th>Expiry Date</th>
            		<th>cvv2</th>
            		<th>Credit Limit</th>
            		<th>Update</th>
            		<th>Remove</th>
        		</tr>
    	  	  </thead>
    		  <tbody>
				<g:each in="${cards}" status="i" var="card">
					<tr>
						<td>${card.bank?.name}</td>
						<td>${card.brand}</td>
						<td>${card.maskNumber}</td>
						<td>${card.holder}</td>
						<td>${card.expiry}</td>
						<td>${card.cvv2}</td>
						<td>${card.creditLimit}</td>
						<td><g:link action="editCard" id="${card.id}">Edit</g:link></td>
						<td><g:link action="removeCard" id="${card.id}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');">Remove</g:link></td>
					</tr>
				</g:each>
				<tr>
					<td><g:link action="addCard">[Add Card]</g:link></td>
				</tr>
			  </tbody>
			</table>
		</g:form>
	</div>
	<div class="row>">
		<g:form method="POST">
		<h3>My Budget</h3>
			<table class="table table-striped" >
			  <thead>
        		<tr>
            		<th>Type</th>
            		<th>Card</th>
            		<th>Budget Type</th>
            		<th>Bill Date</th>
            		<th>Recursive</th>	
            		<th>Start Date</th>
            		<th>End Date</th>
            		<th>Amount</th>
            		<th>Email</th>
            		<th>SMS</th>
            		<th>Remarks</th>
            		<th>Remove</th>
        		</tr>
    	  	  </thead>
    		  <tbody>
				<g:each in="${budgets}" status="i" var="budget">
					<tr>
						<td>${budget.type}</td>
						<td><g:if test="${budget.type!=com.mastercard.labs.Budget.Type.ALL}">${budget.card?.maskNumber}</g:if></td>
						<td>${budget.budgetType}</td>
						<td><g:if test="${budget.budgetType==com.mastercard.labs.Budget.BudgetType.MONTHLY}">${budget.billDate}</g:if></td>
						<td>${budget.recursive}</td>
						<td>
						<g:if test="${budget.startDate}"><g:formatDate format="dd MMM yyyy" date="${budget.startDate}"/></g:if>
						</td>
						<td>
						<g:if test="${budget.endDate}"><g:formatDate format="dd MMM yyyy" date="${budget.endDate}"/></g:if>
						</td>
						<td>${budget.amount}</td>
						<td>${budget.smsNotification}</td>
						<td>${budget.emailNotification}</td>
						<td>${budget.remarks}</td>
						<td><g:link action="removeBudget" id="${budget.id}"  onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');">Remove</g:link></td>
					</tr>
				</g:each>
				<tr>
					<td><g:link action="addBudget">[Add Budget]</g:link></td>
				</tr>
			  </tbody>
			</table>
		</g:form>
	</div>
	<div class="row>">
		<g:form method="POST">
		<h3>My Target</h3>
			<table class="table table-striped" >
			  <thead>
        		<tr>
            		<th>Type</th>
            		<th>Card</th>
            		<th>Target Type</th>
            		<th>Bill Date</th>
            		<th>Recursive</th>	
            		<th>Start Date</th>
            		<th>End Date</th>
            		<th>Amount</th>
            		<th>Email</th>
            		<th>SMS</th>
            		<th>Remarks</th>
            		<th>Remove</th>
        		</tr>
    	  	  </thead>
    		  <tbody>
				<g:each in="${targets}" status="i" var="budget">
					<tr>
						<td>${budget.type}</td>
						<td><g:if test="${budget.type!=com.mastercard.labs.Budget.Type.ALL}">${budget.card?.maskNumber}</g:if></td>
						<td>${budget.budgetType}</td>
						<td><g:if test="${budget.budgetType==com.mastercard.labs.Budget.BudgetType.MONTHLY}">${budget.billDate}</g:if></td>
						<td>${budget.recursive}</td>
						<td>
						<g:if test="${budget.startDate}"><g:formatDate format="dd MMM yyyy" date="${budget.startDate}"/></g:if>
						</td>
						<td>
						<g:if test="${budget.endDate}"><g:formatDate format="dd MMM yyyy" date="${budget.endDate}"/></g:if>
						</td>
						<td>${budget.amount}</td>
						<td>${budget.smsNotification}</td>
						<td>${budget.emailNotification}</td>
						<td>${budget.remarks}</td>
						<td><g:link action="removeBudget" id="${budget.id}"  onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');">Remove</g:link></td>
					</tr>
				</g:each>
				<tr>
					<td><g:link action="addTarget">[Add Target]</g:link></td>
				</tr>
			  </tbody>
			</table>
		</g:form>
	</div>
	<div class="row>">
		<g:form method="POST" action="updateCategory">
		<h3>My Subscriptions</h3>
			<table width="100%">
    		  <tbody>
				<g:each in="${categories}" status="i" var="category">
				<td><g:hiddenField name="category[${i}].categoryId" value="${category.categoryId}"/>
				<td><g:hiddenField name="category[${i}].userCategoryId" value="${category.userCategoryId}"/>
					<g:if test="${(i % 4) == 0}"><tr></g:if>
						<td><g:checkBox name="category[${i}].selected" value="${category.selected}" /> ${category.categoryName}</td>
					<g:if test="${(i % 4) == 3}"></tr></g:if>
				</g:each>
				<tr><td>&nbsp;</td></tr>
				<tr>
				<td><g:actionSubmit value="Update Subscription" action="updateUserCategory" class="btn"/></td>
				<%--<td><g:link action="updateUserCategory">[update Subscription]</g:link></td>
				--%></tr>
			  </tbody>
			</table>
		</g:form>
	</div>
</body>
</html>
